<template>
  <el-dialog  :visible.sync="isShow" center class="earnings-info">
    <div class="graded">
      <h1 class="graded-title">{{order_number}}</h1>
      <el-form :model="gradedForm" label-width="250px" class='gradedForm'>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item  label="服务态度">
              <el-rate
                :value="gradedForm.attitude"
                disabled
                show-score
                allow-half
                disabled-void-icon-class='el-icon-star-on disabled'  
                :score-template="Number(gradedForm.attitude).toFixed(1)">
              </el-rate>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item  label="撰写质量">
              <el-rate
                :value="gradedForm.quelity"
                disabled
                show-score
                allow-half
                disabled-void-icon-class='el-icon-star-on disabled'  
                :score-template="Number(gradedForm.quelity).toFixed(1)">
              </el-rate>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item  label="撰写耗时">
               <el-rate
                :value="gradedForm.take_time"
                disabled
                show-score
                allow-half
                disabled-void-icon-class='el-icon-star-on disabled'  
                :score-template="Number(gradedForm.take_time).toFixed(1)">
              </el-rate>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item  label="平均分">
              <span class="total_score">{{Number(gradedForm.total_score / 3).toFixed(1)}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="tc mt10" v-if="gradedForm.appeal == 0">
        <el-popover
            placement="left-start"
            title="申诉说明"
            width="250"
            trigger="hover"
            content="您可以针对每个评分项目进行申诉，但是要注意的是低于2.5分的项目才能申诉！申诉成功后，评分将不计入您的评分统计。">
            <i slot="reference" class='el-icon-question description'></i>
        </el-popover>
        <!-- <el-button class='description' type="warning" icon="el-icon-question" circle></el-button> -->

        <el-button type="primary" size="mini" :disabled="gradedForm.quelity >= 2.5 && gradedForm.attitude >= 2.5 && gradedForm.take_time >= 2.5" @click="apply">申诉</el-button>
      </div>
    </div>
    <apply-form ref="apply-form" @refresh="getInfo"></apply-form>
  </el-dialog>
</template>

<script>
import applyForm from './apply-form'
export default {
  components: {
    applyForm,
  },
  data () {
    return {
      order_number:'',
      isShow: false,
      detail: null,
      gradedForm: {
        attitude: 0,
        quelity: 0,
        take_time: 0,
        total_score: 0,
        appeal: 0,
      },
      settlement_id: null
    }
  },
  methods: {
    show (data) {
      this.settlement_id = data.id
      this.getInfo()
    },
    getInfo() {
      this.$axios.get(`api/settlement/${this.settlement_id}`).then(res => {
        if (res.data.code == 200) {
          
          this.detail = res.data.data
          if (this.detail.final) {
            this.order_number = this.detail.final.order_number
          }
          if (this.detail && this.detail.final && this.detail.final.grades) {
            
            this.gradedForm.attitude = Number(this.detail.final.grades.attitude)
            this.gradedForm.quelity = Number(this.detail.final.grades.quelity)
            this.gradedForm.take_time = Number(this.detail.final.grades.take_time)
            this.gradedForm.total_score = Number(this.detail.final.grades.total_score)
            this.gradedForm.appeal  = this.detail.final.grades.appeal
            this.isShow = true
          } else {
            this.$alert('该结算暂无评分！', '提示', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          }
          
        } else {
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center: true,
            type: 'warning',
            callback: action => {
            }
          })
        }
      })
    },
    apply() {
      this.$refs['apply-form'].showOn(this.detail.final.grades)
    },
    refresh() {
      this.isShow = false
      this.getInfo()
    },
  }
}
</script>

<style lang='less' scoped>
  .earnings-info {
    /deep/.el-dialog {
      min-width: 600px;
      .el-dialog__close {
        font-size: 20px;
      }
      .el-dialog__body {
        padding-top: 10px;
      }
    }
    .graded {
      &-title {
        text-align: center;
        font-size:20px;
        font-weight:bold;
        color:rgba(53,53,53,1);
        margin-bottom: 20px;
      }
      /deep/.gradedForm {
        .el-form-item {
          height: 100%;
          border: 1px solid #ccc;
          margin-right: -1px;
          margin-bottom: -1px;
          // border-bottom-width: 0;
          .el-form-item__label {
            line-height: 30px;
            background:rgba(194,227,255,1);
            text-align: center;
            font-size:15px;
            color:rgba(72,72,72,1);
          }
          .el-form-item__content{
            background:rgba(244,247,255,1);
            line-height: 30px;
            text-align: center;
          }
        }
        .el-row {
          .el-col-12 {
            .el-form-item {
              border-bottom-width: 0;
            }
          }
        }
        .total_score{
          font-weight: 700;
        }
        .el-row:last-child  {
          .el-form-item{
            margin-bottom: 0;
          }
        }
        /deep/.el-rate {
          display: inline-block;
          margin-left: 22px;
          .el-rate__item {
            .el-rate__icon {
              margin-right: 14px;
              font-size:  20px;
              background: linear-gradient(0deg,#fddfaf 0%,#fcc752 100%);
              -webkit-background-clip: text;
              color: transparent !important;
            }
            .el-icon-star-on {
              background: linear-gradient(0deg,#fddfaf 0%,#fcc752 100%);
              -webkit-background-clip: text;
              color: transparent !important;
            }
            .el-rate__decimal {
              background: linear-gradient(0deg,#fddfaf 0%,#fcc752 100%);
              -webkit-background-clip: text;
              color: transparent !important;
            }
            .disabled {
              color: #b5c9cb !important;
            }
          }
          .el-rate__text {
            font-size: 15px;
            color:#484848 !important;
            font-weight:400;
            font-family:Source Han Sans CN;
            margin-left: 5px;
            // font-style: oblique;
          }
            
        }

      }
      
    }
  }

</style>